<template>
    <div class="enterprise-header">
      <h1>XX企业注册页面</h1>
    </div>
    <div class="register-container">
      <el-form 
        :model="registerForm" 
        :rules="rules" 
        ref="registerFormRef"
        label-width="100px"
        class="register-form"
      >
        <!-- 姓名栏 -->
        <el-form-item label="姓名" prop="name">
          <el-input 
            v-model="registerForm.name" 
            placeholder="请输入姓名"
            clearable 
          />
        </el-form-item>
   
        <!-- 电话栏 -->
        <el-form-item label="电话" prop="phone">
          <el-input 
            v-model="registerForm.phone" 
            placeholder="请输入手机号"
            maxlength="11"
          />
        </el-form-item>
   
        <!-- 年龄栏 -->
        <el-form-item label="年龄" prop="age">
          <el-input 
            v-model.number="registerForm.age" 
            placeholder="请输入年龄"
            type="number"
          />
        </el-form-item>
   
        <!-- 生日栏（日期选择器） -->
        <el-form-item label="生日" prop="birthday">
          <el-date-picker 
            v-model="registerForm.birthday"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
   
        <!-- 密码栏 -->
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="registerForm.password"
            type="password"
            show-password 
            placeholder="请输入密码"
          />
        </el-form-item>
   
        <!-- 确认密码栏 -->
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input 
            v-model="registerForm.confirmPassword"
            type="password"
            show-password 
            placeholder="请再次输入密码"
          />
        </el-form-item>
   
        <!-- 职位栏 -->
        <el-form-item label="职位" prop="position">
          <el-select v-model="registerForm.position" placeholder="请选择职位">
            <el-option label="员工" value="员工" />
            <el-option label="经理" value="经理" />
          </el-select>
        </el-form-item>
   
        <!-- 提交按钮 -->
        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitForm"
            class="submit-btn"
          >立即注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
   
  <script setup>
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
   
  const registerFormRef = ref()
  const registerForm = reactive({
    name: '',
    phone: '',
    age: 0,
    password: '',
    confirmPassword: '',
    position: '',
    birthday:''
  })
   
  // 自定义密码校验规则 
  const validatePass = (rule, value, callback) => {
    if (value !== registerForm.password) {
      callback(new Error('两次输入密码不一致!'))
    } else {
      callback()
    }
  }
  const validateAge = (rule, value, callback) => {
  if (!value) {
    callback(new Error('年龄不能为空'))
  } else if (value < 18) {
    callback(new Error('必须年满18岁')) 
  } else {
    callback()
  }
}
  const rules = reactive({
    name: [
      { required: true, message: '姓名不能为空', trigger: 'blur' },
      { min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
    ],
    phone: [
      { required: true, message: '手机号不能为空', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
    ],
    age: [
    { required: true, validator: validateAge, trigger: 'blur' } // 应用自定义验证规则 
    ],
    birthday: [
      { required: true, message: '请选择生日', trigger: 'change' }
    ],
    password: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { validator: validatePass, trigger: 'blur' }
    ],
    position: [
      { required: true, message: '请选择职位', trigger: 'change' }
    ]
  })
   
  const submitForm = () => {
    registerFormRef.value.validate(valid => {
      if (valid) {
        const formData = { ...registerForm }
        delete formData.birthday
        delete formData.confirmPassword
        console.log(formData)
        axios.post('http://localhost:8088/register', formData)
        .then(res => {
          console.log(res.data)
          ElMessage.success('注册成功!')
        })
        .catch(error => {
          console.error('提交失败:', error)
          ElMessage.error('注册失败，请稍后再试')
        })
      } else {
        ElMessage.error('请完善表单信息')
      }
    })
  }
 

  </script>
   
  <style scoped>
  .register-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f0f2f5;
  }
   
  .register-form {
    width: 800px;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  }
   
  .submit-btn {
    width: 100%;
    margin-top: 20px;
  }

  /* .register-container {
  padding: 40px;      顶部留白
} */
 
/* 增加表单项高度 */
:deep(.el-form-item) {
  margin-bottom: 30px; 
}
 
:deep(.el-form-item__content) {
  line-height: 40px; 
}
 
:deep(.el-input__inner),
:deep(.el-select__wrapper) {
  height: 35px; 
  font-size: 14px; 
}
 
:deep(.el-date-editor) {
  height: 40px;
}
 
:deep(.el-form-item__label) {
  font-size: 15px; /* 标签字号 */
  line-height: 45px; 
}

/* 按钮容器样式修改 */
.button-container {
  margin-top: 0px;  
  display: flex;
  justify-content: center; 
}


.submit-btn {
  width: 40%;  
  height: 50px; 
  margin-left: 120px;
  font-size: 18px;
  letter-spacing: 2px;
  
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 过渡动画 */
  transition: all 0.3s ease;
}
 
/* 悬停效果 */
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


/* 新增标题样式 */
.enterprise-header {
  text-align: center;
  margin: 10px 0 0px;
  position: relative;
}
 
/* .enterprise-header h1 {
  font-size: 22.2rem;
  color: #303133;
  letter-spacing: 2px;
  font-weight: 400;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
} */
 
/* 添加装饰线 */
.enterprise-header h1::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 300px;
  height: 2px;
  background: #409EFF;
}
 
/* 原样式优化 */


</style>
  